<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <!--引入vue-->
  <script type="text/javascript" th:src="@{js/vue.js}"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" th:href="@{css/element.css}">
  <!-- 引入组件库 -->
  <script th:src="@{element-ui/lib/index.js}"></script>
  <!--引入axios异步请求-->
  <script type="text/javascript" th:src="@{js/axios.js}"></script>
  <!--引入moment时间插件-->
  <script type="text/javascript" th:src="@{js/moment.min.js}"></script>
  <!--vue_图标-->
  <link rel="stylesheet" th:href="@{fonts/style.css}">
</head>
<body>
<div id="app">
  <el-container>
    <!-- 头部 -->
    <el-header height="60px">
      <!--左侧-->
      <div>
        <span class="title">{{title}}</span>
      </div>
      <!--右侧-->
      <div>
        <!--头像-->
        <el-popover
            placement="bottom"
            title="修改头像"
            width="150"
            trigger="hover">
          
          <div class="selectAvatar" width="150">
            <span @click="switchover('men.png')">
              <el-avatar :fit="'contain'" :size="'small'" th:src="@{img/avatar/men.png}">
                <img th:src="@{img/avatar/margin.png}"/>
              </el-avatar>
            </span>
  
            <span @click="switchover('women.png')">
              <el-avatar :fit="'contain'" :size="'small'" th:src="@{img/avatar/women.png}">
                <img th:src="@{img/avatar/margin.png}"/>
              </el-avatar>
            </span>

            <span @click="switchover('oldman.png')">
              <el-avatar :fit="'contain'" :size="'small'" th:src="@{img/avatar/oldman.png}">
                <img th:src="@{img/avatar/margin.png}"/>
              </el-avatar>
            </span>

            <el-upload
                class="avatar-uploader"
                name="avatarPic"
                action="/posts"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </div>
          
          <span class="demo-type" slot="reference" style="margin-right: 10px">
            <el-avatar :shape="'square'" :fit="'contain'" :size="'small'" :src="avatar" @error="errorHandler">
                <img th:src="@{img/avatar/margin.png}"/>
            </el-avatar>
          </span>
        </el-popover>
        <!--个人菜单-->
        <el-dropdown trigger="click">
        <span class="el-dropdown-link" style="cursor: pointer;">
						<!--<i class="el-icon-s-custom"></i>-->
						{{userinfo.username}}
						<i class="el-icon-caret-bottom" style="margin-right: 15px"></i>
        </span>
          <el-dropdown-menu slot="dropdown">
            <span @click="getPersonalDetails()"><el-dropdown-item icon="el-icon-user"> 个人信息</el-dropdown-item></span>
            <span @click="getPersonalMessage()"><el-dropdown-item icon="el-icon-phone-outline"> 我的消息</el-dropdown-item></span>
            <a th:href="@{/logout}"><el-dropdown-item icon="el-icon-s-promotion"> 退出登录</el-dropdown-item></a>
          </el-dropdown-menu>
          
        </el-dropdown>
      </div>
    </el-header>
    
    <!-- 主体 -->
    <el-container>

      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="togleCollapse">|||</div>
        
        <el-menu :default-active="checked" unique-opened :collapse="isCollapse" :collapse-transition="false" background-color="#F8F8F8" active-text-color="#409FFF">
          <!-- :unique-opened="true"->只允许展开一个菜单 -->
          <!-- :collapse-transition="false" -> 关闭动画 -->
          <!-- router -> 导航开启路由模式 -->
          <el-menu-item index="1" @click="displaypage(MainPath,'1','首页')" id="Main">
            <i class="el-icon-s-home"></i>
            <span slot="title">
                系统首页
            </span>
          </el-menu-item>
          <!--循环遍历菜单-->
          <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id" :id="item.path">
            <!--一级菜单-->
            <template @click="displaypage(item.path,item.id,item.authName)" slot="title">
              <i :class="getIcon(item.icon)"></i>
              <span>{{item.authName}}</span>
            </template>
            <!--二级菜单-->
            <el-menu-item @click="displaypage(subItem.path,subItem.id,subItem.authName)" :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id" :id="subItem.path">
              <template slot="title">
                <i :class="getIcon(subItem.icon)"></i>
                <span>{{subItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
          
        </el-menu>
      </el-aside>
      <!-- 内容 -->
      <el-main>
        <iframe align="center" width="100%" height="100%" :src="'views/'+activePath+'.html'"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        <!--<router-view></router-view>-->
        <!--<div id="target"></div>-->
      </el-main>
  
      <!-- 操作个人信息 -->
      <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
        <el-form :model="Details" :rules="rules" ref="detVerify" class="demo-ruleForm" autocomplete="off">
          <el-form-item>
            <el-input type="hidden" name="uid" v-model="Details.uid"></el-input>
            <el-row>
            <el-col :span="4">
              <el-form-item label-width="25px">
                <el-avatar :fit="'contain'" :size="80" :shape="'square'" :src="'img/avatar/'+Details.url">
                  <img :src="avatar"/>
                </el-avatar>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-row>
                <el-col :span="10">
                  <el-form-item :size="occupy" label="姓名: " prop="pname" label-width="60px">
                    <el-input v-model="Details.pname" autocomplete="off" placeholder="姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item :size="occupy" label="职位: " prop="role" label-width="60px">
                    <el-input :disabled="true" v-model="Details.role||Details.roles.role" autocomplete="off" placeholder="职位"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item :size="occupy" label="电话: " prop="phone" label-width="60px">
                    <el-input v-model="Details.phone" autocomplete="off" placeholder="电话"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <el-form-item :size="occupy" label="邮箱: " prop="email" label-width="60px">
                    <el-input v-model="Details.email" autocomplete="off" placeholder="邮箱"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            </el-row>
  
            <el-row>
              <el-col :span="12">
                <el-form-item :size="occupy" label="注册时间: " prop="register_time" label-width="100px">
                  <el-date-picker
                      v-model="Details.register_time"
                      type="datetime"
                      :disabled="true"
                      placeholder="选择日期时间"
                      default-time="12:00:00">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :size="occupy" label="身份证: " :prop="prop.IdCard" label-width="90px">
                  <el-input :disabled="shows" v-model="Details.IdCard" autocomplete="off" placeholder="身份证号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :size="occupy" label="修改时间: " prop="update_time" label-width="100px">
                  <el-date-picker
                      v-model="Details.update_time"
                      type="datetime"
                      :disabled="true"
                      placeholder="选择日期时间"
                      default-time="12:00:00">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :size="occupy" label="支付密码: " :prop="prop.deal_pwd" label-width="90px">
                  <el-input :disabled="shows" v-model="Details.deal_pwd" autocomplete="off" placeholder="支付密码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item :size="occupy" label="信誉等级: " label-width="100px">
                  <el-rate
                      v-model="Details.cd_id||3"
                      disabled
                      show-score
                      :icon-classes="iconClasses"
                      void-icon-class="icon-rate-face-off"
                      :colors="colors"
                      :score-template="Details.cd_message||'一般'" style="margin-top: 6px">
                  </el-rate>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelForm('detVerify')">取 消</el-button>
          <el-button type="primary" @click="UporIn=='修改'?updatePersonalDetails('detVerify'):insertPersonalDetails('detVerify')" :loading="loading">{{ loading ? '提交中 ...' : UporIn }}</el-button>
        </div>
      </el-dialog>
      <!--我的消息列表-->
      <el-dialog title="我的消息" :visible.sync="dialogTableMessage">
        <el-table
            ref="multipleTable"
            stripe :data="Messages.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            tooltip-effect="dark"
            style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="title"
              label="标题"
              width="100">
          </el-table-column>
          <el-table-column
              prop="sender"
              label="发送人"
              width="100">
          </el-table-column>
          <el-table-column
              prop="sendtime"
              label="发送时间"
              :formatter="formatDate"
              sortable
              width="160">
          </el-table-column>
          <el-table-column
              label="状态"
              width="70"
              :filters="[{ text: '未读', value: 0 }, { text: '已读', value: 1 }]"
              :filter-method="filterTag"
              filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 1 ? 'primary' : 'success'" disable-transitions>
                {{ scope.row.status === 0 ? '未读' : '已读' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="contents"
              label="内容"
              show-overflow-tooltip>
          </el-table-column>
  
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="发送人: ">
                  <span>{{ props.row.sender }}</span>
                </el-form-item>
                <el-form-item label="标题: ">
                  <span>{{ props.row.title }}</span>
                </el-form-item>
                <el-form-item label="消息内容">
                  <span>{{ props.row.contents }}</span>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-document-checked" size="mini" :type="props.row.status === 0 ? 'block' : 'none'" @click="Read(props.row.id)">已读</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          
        </el-table>
        <div style="text-align:center;margin-top: 15px">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[1, 3, 5, 8]"
              :page-size="pagesize"
              :pager-count="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Messages.length">
          </el-pagination>
        </div>
      </el-dialog>
    </el-container>
  </el-container>

</div>
</body>

<script>
    let app = new Vue({
      el: '#app',
      name: 'Home',
      // router: router,
      data () {
          var checkPhone = (rule, value, callback) => {
              if (!value) {
                  return callback(new Error('手机号不能为空！'));
              } else {
                  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                  if (reg.test(value)) {
                      callback();
                  } else {
                      return callback(new Error('请输入正确的手机号！'));
                  }
              }
          };
          return {
              // 标题
              title: '',
              // 主页地址
              MainPath: 'Main',
              // 用户信息
              userinfo: {},
              // 默认不折叠
              isCollapse: false,
              // 左侧菜单数据
              menulist: [],
              // 被激活导航地址
              activePath: 'Main',
              //菜单选中
              checked: '1',
              // 头像地址
              avatar: 'img/avatar/men.png',
              //上传头像
              imageUrl: '',
              //个人信息弹窗
              dialogFormVisible: false,
              //个人信息
              Details: {
                  uid: '',
                  email: '',
                  phone: '',
                  pname: '',
                  IdCard: '',
                  deal_pwd: '',
                  roles:{
                      rid:'',
                      role:'',
                  },
                  register_time: '',
                  update_time: '',
                  url: 'men.png',
                  cd_id: 3,
                  cd_message: '一般',
              },
              // 显示
              shows: true,
              // 表单大小
              occupy: 'small',
              // 是否验证
              prop: {
                  IdCard: '',
                  deal_pwd: '',
              },
              // dates: new Date(),
              // 信誉颜色
              colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
              // 信誉图标
              iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
              // 数据校验
              rules: {
                  pname: [
                      { required: true, message: '姓名不能为空！', trigger: 'blur' },
                      { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: ['blur', 'change'] }
                  ],
                  // role: [
                  //     { required: true, message: '请选择职务！', trigger: 'change' }
                  // ],
                  phone: [
                      { required: true, message: '电话号不能为空！', trigger: 'blur' },
                      {validator: checkPhone, trigger: ['blur', 'change']}
                  ],
                  email: [
                      { required: true, message: '邮箱不能为空！', trigger: 'blur' },
                      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                  ],
                  IdCard: [
                      { required: true, message: '身份证号不能为空！', trigger: 'blur' },
                      {
                          pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                          message: '证件号码格式有误！',
                          trigger: ['blur', 'change']
                      }
                  ],
                  deal_pwd: [
                      { required: true, message: '支付密码不能为空！', trigger: 'blur' },
                      {
                          pattern: /^\d{6}$/,
                          message: '支付密码只能设置六位数字！',
                          trigger: ['blur', 'change']
                      }
                  ],
                  // register_time: [
                  //     { type: 'date', required: true, message: '请选择日期时间！', trigger: 'change' }
                  // ],
                  // update_time: [
                  //     { type: 'date', required: true, message: '请选择日期时间！', trigger: 'change' }
                  // ],
              },
              // 修改或者添加
              UporIn: '',
              // 时间延迟
              timer: null,
              // 加载图标
              loading: false,
              // 个人消息弹窗
              dialogTableMessage: false,
              // 所有消息数据
              Messages: [],
              // 消息选中
              multipleSelection: [],
              // 分页-默认第几页
              currentPage: 1,
              //分页-默认一页多少条
              pagesize: 5,
          };
      },
      // 页面加载时获取数据
      created () {
        axios({
          url: '/userinfo',
        }).then(res => {
          console.log(res.data);
          this.userinfo = res.data.userinfo;
          this.menulist = res.data.menus;
          if(res.data.person===null){
              this.avatar = 'img/avatar/men.png';
          }else{
              this.avatar = 'img/avatar/'+res.data.person.url.url;
          }
          // 更改
          if(this.userinfo.roles.rid === 0){
            this.title = '后台管理系统';
            this.MainPath = 'AdminMain';
            this.activePath = 'AdminMain';
          }else if(this.userinfo.roles.rid === 1){
            this.title = '金融管理系统';
            this.MainPath = 'Main';
          }
          
          //调用浏览记录
          if(this.userinfo.personal&&this.userinfo.uid==window.sessionStorage.getItem('uid')){
              // console.log(this.userinfo.uid);
              // console.log("xxx"+window.sessionStorage.getItem('uid'));
              this.checked = window.sessionStorage.getItem('checked')==null ? '1' : window.sessionStorage.getItem('checked');
              this.activePath = window.sessionStorage.getItem('activePath')==null ? 'Main' : window.sessionStorage.getItem('activePath');
          }
        });
      },
      methods: {
          // 菜单的折叠与展开
          togleCollapse () {
              this.isCollapse = !this.isCollapse;
              // this.checked = index;
              // console.log("che"+this.checked)
              // console.log("in"+index);
          },
          // 头像加载失败
          errorHandler() {
              // this.avatar = 'img/avatar/margin.png';
              return true;
          },
          //侧边栏选中
          displaypage(path,checked,name){
              console.log("==="+checked);
              if(!this.userinfo.personal){
                  const h = this.$createElement;
                  this.$notify({
                      title: '警告',
                      message: h('i', { style: 'color: teal'}, '请在个人中心填写个人信息，才可以进行操作！'),
                      type: 'warning',
                      offset: 50
                  });
                  return false;
              }
              else if(this.userinfo.visit.indexOf(checked) < 0){
                  console.log(this.userinfo.visit);
                  const h = this.$createElement;
                  this.$notify({
                      title: '通知',
                      message: h('i', { style: 'color: teal'}, '您的权限不足以使用['+name+']板块！'),
                      type: 'warning',
                      offset: 50
                  });
                  return false;
              }
              else if(path != null){
                  this.activePath = path;
                  // 保存连接的激活地址
                  window.sessionStorage.setItem('activePath', path);
                  this.checked = checked+'';
                  window.sessionStorage.setItem('checked', checked);
                  //记录当前用户
                  window.sessionStorage.setItem('uid', this.userinfo.uid);
              }
          },
          // 侧边栏图标
          getIcon(icon){
              if (icon != null){
                  return icon;
              }else{
                  return "el-icon-menu";
              }
          },
          //切换头像
          switchover(avatarName){
            this.avatar = 'img/avatar/'+avatarName;
            axios({
                url: '/updatePerson',
                params: {
                  url: avatarName,
                }
            }).then(res => {
              console.log("修改成功！");
            })
          },
          // 头像上传
          handleAvatarSuccess(res, file) {
              this.avatar = URL.createObjectURL(file.raw);
              axios({
                  url: '/insertPerson',
                  params: {
                      url: res,
                  }
              }).then(res => {
                  console.log("添加成功！");
              })
          },
          beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg';
              const isPNG = file.type === "image/png";
              const isLt2M = file.size / 1024 / 1024 < 2;

              if (!isJPG && !isPNG) {
                  this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
              }
              if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
              }
              return (isJPG || isPNG) && isLt2M;
          },
          //获取个人信息
          getPersonalDetails(){
              axios({
                  method: 'get',
                  url: '/queryPersonalDetails',
              }).then(res => {
                  if(res.status==200){
                      this.Details = res.data.Details;
                      if(res.data.states==="已添加"){
                          this.UporIn = "修改";
                          this.prop.IdCard = "";
                          this.prop.deal_pwd = "";
                          this.shows = true;
                          let a= this.Details.IdCard;
                          this.Details.IdCard = a.replace(a.substring(10,a.length-4),'****');
                          let b= this.Details.deal_pwd+'';
                          this.Details.deal_pwd = b.replace(b.substring(6,b.length-6),'******');
                      }else if(res.data.states==="未添加"){
                          this.UporIn = "添加";
                          this.prop.IdCard = "IdCard";
                          this.prop.deal_pwd = "deal_pwd";
                          this.shows = false;
                      }
                      this.dialogFormVisible = true;
                  }else{
                      this.$message({
                          message: '异常通知！',
                          type: 'warning'
                      });
                  }
              })
          },
          // 添加个人信息
          insertPersonalDetails(formName){
              this.$refs[formName].validate((valid) => {
                  if (valid) {
                      if (this.loading) {
                          return;
                      }
                      this.$confirm('确定要提交表单吗？')
                          .then(_ => {
                              this.loading = true;
                              this.timer = setTimeout(() => {

                                  axios({
                                      method: 'post',
                                      url: '/insertPersonalDetails',
                                      data: {
                                          Details: this.Details,
                                          avatarUrl: this.avatar.split('/')[2],
                                      }
                                  }).then(res => {
                                      console.log(res);
                                      if(res.status==200){
                                          this.dialogFormVisible = false;
                                          this.$message({
                                              message: '恭喜你，添加成功！',
                                              type: 'success'
                                          });
                                          window.location.href = window.location.href;
                                      }else{
                                          this.$message.error('出错了！');
                                      }
                                  })

                                  // 动画关闭需要一定的时间
                                  setTimeout(() => {
                                      this.loading = false;
                                  }, 400);
                              }, 2000);
                          })
                          .catch(_ => {});
                  }
              });
          },
          // 修改个人信息
          updatePersonalDetails(formName){
              this.$refs[formName].validate((valid) => {
              if (valid) {
                  if (this.loading) {
                      return;
                  }
                  this.$confirm('确定要提交表单吗？')
                      .then(_ => {
                          this.loading = true;
                          this.timer = setTimeout(() => {

                              axios({
                                  method: 'post',
                                  url: '/updatePersonalDetails',
                                  data: {
                                      Details: this.Details,
                                  }
                              }).then(res => {
                                  console.log(res);
                                  if(res.status==200){
                                      this.dialogFormVisible = false;
                                      this.$message({
                                          message: '恭喜你，修改成功！',
                                          type: 'success'
                                      });
                                  }else{
                                      this.$message.error('出错了！');
                                  }
                              })

                              // 动画关闭需要一定的时间
                              setTimeout(() => {
                                  this.loading = false;
                              }, 400);
                          }, 2000);
                      })
                      .catch(_ => {});
              }
              });
          },
          // 取消提交
          cancelForm(formName) {
              this.loading = false;
              this.dialogFormVisible = false;
              clearTimeout(this.timer);
          },
          //获取个人消息
          getPersonalMessage(){
              axios({
                  method: 'get',
                  url: '/queryPersonalmessage',
              }).then(res => {
                  if(res.status==200){
                      this.Messages = res.data.message;
                      this.dialogTableMessage = true;
                  }else{
                      this.$message({
                          message: '异常通知！',
                          type: 'warning'
                      });
                  }
              })
          },
          //日期格式化
          formatDate(row, column) {
              // 获取单元格数据
              let data = row[column.property]
              if(data == null) {
                  return null;
              }
              let dt = new Date(data);
              return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
          },
          // 状态标签
          filterTag(value, row) {
              return row.status === value;
          },
          // 取消全选
          toggleSelection(rows) {
              if (rows) {
                  rows.forEach(row => {
                      this.$refs.multipleTable.toggleRowSelection(row);
                  });
              } else {
                  this.$refs.multipleTable.clearSelection();
              }
          },
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },
          // 分页显示
          handleSizeChange: function(val) {
              this.pagesize = val;
          },
          handleCurrentChange: function(currentPage) {
              this.currentPage = currentPage;
          },
          // 消息已读
          Read(id){
              axios({
                  method: 'post',
                  url: '/updateReadStatus',
                  data: {
                      id: id,
                  },
              }).then(res => {
                  if(res.status==200){
                      this.$message({
                          message: '该信息已读！',
                          type: 'success'
                      });
                  }else{
                      this.$message({
                          message: '异常通知！',
                          type: 'warning'
                      });
                  }
                  this.Messages = res.data.message;
              })
          },
      },
    })
</script>
<style scoped>
  body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  a {
    text-decoration:none; /*CSS下划线效果：无下划线*/
  }
  
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  
  .el-container {
    height: 100%;
  }
  .selectAvatar{
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
  }
  .el-header {
    background-color: #F0F7FF;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    font-size: 20px;

  }

  .el-header > div {
    display: flex;
    align-items: center;
  }

  /*.el-header > div img {*/
    /*height: 28px;*/
  /*}*/
  .el-header > div .title {
    margin-left: 20px;
  }
  
  .el-aside {
    background-color: #F8F8F8;
    height: 900px;
  }

  .el-aside .el-menu {
    border: none;
  }
  
  .el-main {
    background-color: #eaedf1;
  }
  .iconfont{
    margin-right: 10px;
  }
  .toggle-button {
    background-color: #F8F8F8;
    font-size: 10px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.2em;
    /* // 鼠标放上去变成小手 */
    cursor: pointer;
  }
  
  /*头像上传*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    /*position: relative;*/
    /*overflow: hidden;*/
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 26px;
    color: #8c939d;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
  }
  .avatar {
    width: 26px;
    height: 26px;
    display: block;
  }
  /*表格居中*/
  .el-table td, .el-table th {
    text-align: center !important;
  }
  /*表格展开数据表单样式*/
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  /*按钮状态*/
  .el-button--block{
    display: block;
  }
  .el-button--none{
    display: none;
  }
</style>
</html>